<template>
  <!-- 客户属性 -->
  <div>
    <el-form
      :model="formData"
      :rules="formRules"
      label-width="100px"
      label-suffix=":"
      ref="form"
    >
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item class="special" label="客户等级" prop="customerRating">
            <el-select
              v-model.trim="formData.customerRating"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.customLevel"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="船公司" prop="shipOwnerId">
            <el-select
              v-model.trim="formData.shipOwnerId"
              filterable
              clearable
              placeholder="请输入后搜索"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.shipCompanyOption"
                :key="item.id"
                :label="item.nameCh"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目的港" prop="destinationPort">
            <el-select
              v-model.trim="formData.destinationPort"
              filterable
              clearable
              placeholder="请输入后搜索"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.destinationPort"
                :key="item.id"
                :label="item.nameCh"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品名" prop="nameOfGoods">
            <el-input
              v-model.trim="formData.nameOfGoods"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item class="special" label="订舱锁定" prop="bookingLockFlag">
            <div style="display: flex; width: 100%">
              <el-checkbox v-model="formData.bookingLockFlag" label="" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            class="special"
            label="锁定原因"
            prop="bookingLockCause"
          >
            <el-input
              v-model.trim="formData.bookingLockCause"
              clearable
              placeholder="请输入原因"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="费用锁定" prop="ffeesLockFlag">
            <div style="display: flex; width: 100%">
              <el-checkbox v-model="formData.ffeesLockFlag" label="" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="锁定原因" prop="feesLockCause">
            <el-input
              v-model.trim="formData.feesLockCause"
              clearable
              placeholder="请输入原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item class="special" label="客户来源" prop="customerSource">
            <el-select
              v-model.trim="formData.customerSource"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.customSource"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开发进度" prop="developmentStatus">
            <el-select
              v-model.trim="formData.developmentStatus"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.development"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="付款习惯" prop="paymentHabits">
            <el-select
              v-model.trim="formData.paymentHabits"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.paymentHabits"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item
            class="special"
            label="竞争对手分析"
            prop="competitorAnalytics"
          >
            <el-input
              v-model.trim="formData.competitorAnalytics"
              clearable
              fit-input-width
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item class="special" label="出口代理商信息" prop="entCode">
            <el-input
              v-model.trim="formData.exportAgentInfo"
              clearable
              fit-input-width
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item class="special" label="备注" prop="remark">
            <el-input
              v-model.trim="formData.remark"
              clearable
              fit-input-width
              :rows="2"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    Id: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      formData: {
        id: 0,
        createBy: "",
        createTime: "2024-05-21T03:47:22.019Z",
        updateBy: "",
        updateTime: "",
        isDeleted: true,
        contactComId: this.$route.query.id,
        customerRating: "",
        shipOwnerId: "",
        destinationPort: "",
        nameOfGoods: "",
        competitorAnalytics: "",
        exportAgentInfo: "",
        bookingLockFlag: false,
        bookingLockCause: "",
        ffeesLockFlag: false,
        feesLockCause: "",
        customerSource: "",
        paymentHabits: "",
        developmentStatus: "",
        remark: "",
      },
      isUpdatess: false,
      compareFormData: {},
      formRules: {
        customerRating: [{ required: true, trigger: "blur" }],
      },
      BookingisLock: false,
      feeIsLock: false,
      shipCompanyOption: [], //船公司下拉表
      customLevel: [], //客户等级
      destinationPort: [], //目的港
      customSource: [], //客户来源
      development: [], //开发进度
      paymentHabits: [], //付款习惯
    };
  },
  components: {},
  methods: {
    getList() {
      this.$http
        .get("/api/crcustomer/querybyid", {
          Id: this.$route.query.id,
        })
        .then(async (res) => {
          console.log("客户属性", res);

          let shipres = await this.$http.get("/api/csshipcompany/query");
          this.shipCompanyOption = shipres.content;

          if (res.status && res.data != null) {
            res.data.shipOwnerId = this.translateShipLabel(
              this.shipCompanyOption,
              res.data.shipOwnerId
            );
            this.formData = res.data;
            this.compareFormData = JSON.parse(JSON.stringify(res.data));
          }

          //目的港
          let destinationPort = await this.$http.get("/api/csport/querypage", {
            KeyWords: "",
            PageIndex: "1",
            PageSize: "99999",
          });
          this.destinationPort = destinationPort.content;

          // 获取所有字典
          let dictAll = await this.$http.get("/api/basedict/query");
          console.log("dictAll", dictAll);
          let customLevel = await this.$http.get("/api/basedictdetail/query", {
            DictId: dictAll.content.filter((item) => item.name == "客户等级")[0]
              .id,
            DictName: "",
            KeyWords: "",
          });
          let customSource = await this.$http.get("/api/basedictdetail/query", {
            DictId: dictAll.content.filter((item) => item.name == "客户来源")[0]
              .id,
            DictName: "",
            KeyWords: "",
          });
          let development = await this.$http.get("/api/basedictdetail/query", {
            DictId: dictAll.content.filter(
              (item) => item.description == "开发进度"
            )[0].id,
            DictName: "",
            KeyWords: "",
          });
          let paymentHabits = await this.$http.get(
            "/api/basedictdetail/query",
            {
              DictId: dictAll.content.filter(
                (item) => item.description == "付款习惯"
              )[0].id,
              DictName: "",
              KeyWords: "",
            }
          );
          this.customLevel = customLevel.content;
          this.customSource = customSource.content;
          this.development = development.content;
          this.paymentHabits = paymentHabits.content;
        });
    },
    translateShipLabel(option, id) {
      //将船公司id转换为中文全称
      let shipName = "";
      if (option.filter((item) => item.id == id).length) {
        shipName = option.filter((item) => item.id == id)[0].nameCh;
      }
      return shipName;
    },
    resetFormData() {
      this.formData = JSON.parse(JSON.stringify(this.compareFormData));
    },
  },
  mounted() {
    this.getList();
  },
  watch: {
    formData: {
      handler: function (newVal, oldVal) {
        if (this.isUpdatess) {
          this.$emit("customAttributesData", newVal);
          this.$emit("acceptNew", newVal);
        }
        this.isUpdatess = true;
      },
      deep: true,
    },
  },
});
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 108px !important;
}
::v-deep .el-form-item--small {
  margin-bottom: 8px;
}
</style>
